<!DOCTYPE html>
<html>
<head>
<title>登录注册Tab切换小部件</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<script src="js/jquery.min.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
		type: 'default',
		width: 'auto',
		fit: true   
	});
});
</script>

</head>
<body>


<div class="main-info">

	<div class="sap_tabs">
		
		<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
				
			<ul class="resp-tabs-list">
				<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><h2><span>登录</span></h2></li>
				<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>注册</span></li>
				<div class="clear"> </div>
			</ul>
			
			<div class="resp-tabs-container">
			
				<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
					<div class="login-top">
						<form>
							<input type="text" class="email" placeholder="邮箱" required="" />
							<input type="password" class="password" placeholder="密码" required="" />	
							<input type="checkbox" id="brand" value="">
							<label for="brand"><span></span> 还记得我吗？</label>
						</form>
						<div class="login-bottom">
							<ul>
								<li>
									<a href="#">忘记密码了吗？</a>
								</li>
								<li>
									<form>
										<input type="submit" value="登录"/>
									</form>
								</li>
							<ul>
							<div class="clear"></div>
						</div>	
					</div>
				</div>

				<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
					<div class="login-top sign-top">
						<form>
							<input type="text" class="name active" placeholder="用户名" required=""/>
							<input type="text" class="email" placeholder="邮箱" required=""/>
							<input type="password" class="password" placeholder="密码" required=""/>		
							<input type="checkbox" id="brand1" value="">
							<label for="brand1"><span></span> 还记得我吗？</label>
						</form>
						<div class="login-bottom">
							<ul>
								<li>
									<a href="#">忘记密码了吗？</a>
								</li>
								<li>
									<form>
										<input type="submit" value="注册"/>
									</form>
								</li>
							<ul>
							<div class="clear"></div>
						</div>	
					</div>
				</div>
				
			</div>				  	 
			
		</div>
		
	</div>
	
	<div class="social-icons">
		<ul> 
			<li><a href="#"><span class="icons"></span><span class="text">Facebook</span></a></li>
			<li class="twt"><a href="#"><span class="icons"></span><span class="text">Twitter</span></a></li>
			<li class="ggp"><a href="#"><span class="icons"></span><span class="text">Google+</span></a></li>
			<li class="pin"><a href="#"><span class="icons"></span><span class="text">Pinterest</span></a></li>
			<div class="clear"> </div>
		</ul> 
	</div>
	
</div>	


</body>
</html>
